<template>
  <section id="contact" class="contact">
    <div class="contact-container">
      <div class="contact-header">
        <h2 class="section-title">联系方式</h2>
      </div>
      <div class="contact-content">
        <div class="contact-info">
          <div class="info-item">
            <div class="info-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2C8.13 2 5 5.13 5 9C5 15.25 12 22 12 22C12 22 19 15.25 19 9C19 5.13 15.87 2 12 2ZM12 12C10.34 12 9 10.66 9 9C9 7.34 10.34 6 12 6C13.66 6 15 7.34 15 9C15 10.66 13.66 12 12 12Z" fill="#00ff00"/>
              </svg>
            </div>
            <div class="info-text">
              <h3>公司地址</h3>
              <p>北京市海淀区中关村科技园8号楼</p>
            </div>
          </div>
          <div class="info-item">
            <div class="info-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 15.5C18.8 15.5 17.55 15.3 16.43 14.9C16.08 14.8 15.69 14.95 15.42 15.21L13.21 17.42C10.38 15.96 8 13.6 8 10.91V7.5C8 6.95 7.55 6.5 7 6.5H5C4.45 6.5 4 6.95 4 7.5V11C4 15.08 7.03 18.59 11 19.69V22H13V19.69C16.97 18.59 20 15.08 20 11V10.5C20 9.95 19.55 9.5 19 9.5H17C16.45 9.5 16 9.95 16 10.5V10.91C16 12.41 15.2 13.81 13.91 14.61L15.42 16.12C15.78 16.48 15.93 17.01 15.76 17.5L14.65 19.83C14.54 20.08 14.29 20.24 14 20.24C13.79 20.24 13.57 20.14 13.44 19.95L12 18L10.56 19.95C10.43 20.14 10.21 20.24 10 20.24C9.71 20.24 9.46 20.08 9.35 19.83L8.24 17.5C8.07 17.01 8.22 16.48 8.58 16.12L10.09 14.61C8.8 13.81 8 12.41 8 10.91V10.5C8 9.95 7.55 9.5 7 9.5H5C4.45 9.5 4 9.95 4 10.5V11C4 16.52 8.48 21 14 21C14.85 21 15.66 20.88 16.43 20.66C17.95 22.22 20.2 23 22.67 23H23C23.55 23 24 22.55 24 22V20.68C24 20.4 23.77 20.17 23.49 20.12C22.68 19.94 21.82 19.62 21 19.17C20.19 20.45 18.77 21.39 17.14 21.79C16.81 21.88 16.45 21.92 16.08 21.92C14.87 21.92 13.68 21.57 12.67 20.96L11.24 22.65C10.94 22.99 10.46 23.11 10 22.95C9.5 22.78 9.12 22.35 9.05 21.85L8.04 17.41C6.66 16.74 5.5 15.47 5.5 14.03V9C5.5 6.17 8.17 3.5 11 3.5C13.83 3.5 16.5 6.17 16.5 9V10.91C16.5 11.27 16.7 11.59 17.02 11.67L18.46 11.94C19.5 11.09 20.21 9.87 20.31 8.48C20.41 7.09 19.9 5.66 18.87 4.63C17.83 3.6 16.39 3.09 14.9 3.19C14.83 2.5 14.29 2 13.6 2H10.4C9.71 2 9.17 2.5 9.1 3.19C7.61 3.09 6.17 3.6 5.13 4.63C4.1 5.66 3.59 7.09 3.69 8.48C3.79 9.87 4.5 11.09 5.54 11.94L6.98 11.67C7.3 11.59 7.5 11.27 7.5 10.91V9C7.5 5.42 10.42 2.5 14 2.5C17.58 2.5 20.5 5.42 20.5 9V15.5H20Z" fill="#00ff00"/>
              </svg>
            </div>
            <div class="info-text">
              <h3>联系电话</h3>
              <p>[请联系客服获取]</p>
            </div>
          </div>
          <div class="info-item">
            <div class="info-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6ZM20 8L12 13L4 8V6L12 11L20 6V8Z" fill="#00ff00"/>
              </svg>
            </div>
            <div class="info-text">
              <h3>电子邮箱</h3>
              <p>[请联系客服获取]</p>
            </div>
          </div>
        </div>
        <div class="contact-social">
          <h3>关注我们</h3>
          <div class="social-icons">
            <a href="#" class="social-icon" aria-label="微信">
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="18" fill="rgba(0, 255, 0, 0.1)"/>
                <path d="M15 20C14.45 20 14 19.55 14 19C14 18.45 14.45 18 15 18H25C25.55 18 26 18.45 26 19C26 19.55 25.55 20 25 20H15Z" fill="#00ff00"/>
                <path d="M14 13C13.45 13 13 12.55 13 12C13 11.45 13.45 11 14 11H26C26.55 11 27 11.45 27 12C27 12.55 26.55 13 26 13H14Z" fill="#00ff00"/>
                <path d="M13 25C12.45 25 12 24.55 12 24C12 23.45 12.45 23 13 23H22C22.55 23 23 23.45 23 24C23 24.55 22.55 25 22 25H13Z" fill="#00ff00"/>
              </svg>
            </a>
            <a href="#" class="social-icon" aria-label="微博">
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="18" fill="rgba(0, 255, 0, 0.1)"/>
                <path d="M25 15H15V25H25V15Z" fill="#00ff00"/>
                <path d="M27 20C27 21.66 25.66 23 24 23C22.34 23 21 21.66 21 20C21 18.34 22.34 17 24 17C25.66 17 27 18.34 27 20Z" fill="#00ff00"/>
              </svg>
            </a>
            <a href="#" class="social-icon" aria-label="视频">
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="18" fill="rgba(0, 255, 0, 0.1)"/>
                <path d="M17 25L25 20L17 15V25Z" fill="#00ff00"/>
              </svg>
            </a>
            <a href="#" class="social-icon" aria-label="Ins">
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="18" fill="rgba(0, 255, 0, 0.1)"/>
                <circle cx="20" cy="18" r="5" fill="#00ff00"/>
                <path d="M27 28C27 27.45 26.55 27 26 27H25C24.45 27 24 27.45 24 28C24 28.55 24.45 29 25 29H26C26.55 29 27 28.55 27 28Z" fill="#00ff00"/>
              </svg>
            </a>
          </div>
          <div class="map-placeholder">
            <svg width="300" height="200" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="300" height="200" rx="5" fill="rgba(0, 0, 0, 0.3)"/>
              <text x="150" y="100" font-family="Arial" font-size="16" fill="#666" text-anchor="middle">地图加载中...</text>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Contact'
}
</script>

<style scoped>
.contact {
  background-color: #0a0a0a;
  color: #fff;
  padding: 40px 0;
}

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.contact-header {
  text-align: center;
  margin-bottom: 30px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #00ff00;
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background-color: #00ff00;
}

.contact-content {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.contact-info {
  flex: 1;
}

.contact-social {
  flex: 1;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 15px;
}

.info-icon {
  margin-top: 3px;
}

.info-text h3 {
  font-size: 16px;
  font-weight: bold;
  color: #00ff00;
  margin-bottom: 8px;
}

.info-text p {
  font-size: 13px;
  color: #ddd;
  line-height: 1.4;
}

.contact-social h3 {
  font-size: 18px;
  font-weight: bold;
  color: #00ff00;
  margin-bottom: 15px;
}

.social-icons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.social-icon {
  transition: transform 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-5px);
}

.map-placeholder {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

/* Responsive design */
@media (max-width: 768px) {
  .section-title {
    font-size: 28px;
  }
  
  .contact-content {
    flex-direction: column;
    gap: 40px;
  }
  
  .social-icons {
    justify-content: center;
  }
}
</style>